<script setup>
import { Edit, Delete,Search,Plus } from '@element-plus/icons-vue'
// import { ElMessageBox } from 'element-plus'
// import { DrawerProps } from 'element-plus'
import ProductEdit from './components/ProductEdit.vue'
import { getProductListService,deleteProductListService,updateProductListService } from '@/api/product.js'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
const value = ref('')
const dataList = ref()
let allDataList=ref()
const total = ref(10)
const options = [
{
    value: '已上架',
    label: '已上架',
  },
  {
    value: '下架',
    label: '下架',
  }
]

const drawer = ref()
const isSale = ref(true)
const input4 = ref('')
const params = ref({
  page:1,
  pageSize:5,
  saleStatus:1,
})

const loading = ref(false)
const data=ref(null)

const getDataList = async () => {
  loading.value = true
  const res = await getProductListService(params.value)
  total.value = res.data.data.total
  console.log('111111',res.data.data.records)
  dataList.value = res.data.data.records
  allDataList.value=res.data.data.records
  loading.value = false
  
  // for(let i =0 ;i<dataList.value.lenth; i++){
  //   dataList.value[i].saleStatusString = dataList.value[i].saleStatus ===1 ? '已上架': '下架'
  // }
  //  

  dataList.value=dataList.value.map((item)=>{
    if(item.saleStatus=='0')
      item.saleStatus="已下架"
    else
      item.saleStatus="已上架"
    return item
  })
  // console.log("test-------------------",test)
}

getDataList()
const onDelProduct = async(row) => {
  console.log("row----------",row)
  await ElMessageBox.confirm('你确认要删除该商品吗', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  const result=await deleteProductListService(row)
  console.log("删除结果",result)
  ElMessage.success('删除成功')

  getDataList()
}
const onAddProduct = () => {
  drawer.value.open({})
}
const onEditProduct = (row) => {
  row.isEdit=true
  drawer.value.open(row)
}
const onSuccess = () => {
    setTimeout(()=>{
      console.log("rrrrrrrrrrrrrrrrrrrrrr")
    })
    getDataList()
}
// const  direction = ref<DrawerProps['direction']>('rtl')

// 处理分页逻辑
const handleSizeChange = (size) => {
  console.log('当前每页条数数',size);
  params.value.page = 1
  params.value.pageSize = size
  getDataList()

}
const handleCurrentChange = (page) => {
  console.log('当前页数',page);
  params.value.page = page
  getDataList()
}

const func=(index)=>{
  if(index==1)
  {
    dataList.value=allDataList.value.filter((item)=>{
      return item.saleStatus=='已下架'
    })
  }else if(index==0)
  {
    dataList.value=allDataList.value.filter((item)=>{
      return item.saleStatus=='已上架'
    })
  }
}

const changeData=()=>{
  console.log("qwe",value.value)
 
  if(value.value=='已上架')
  {
    params.value.saleStatus = 1
  } else {
    params.value.saleStatus = 0
  }
  console.log(params.value.saleStatus)
  getDataList()
}
</script>

<template>
  <div>
    <!-- <div>{{ dataList }}</div> -->
    <div class="header-div">
      <el-row>
      <el-col :span="8">
        <h4 class="title">商品列表</h4>
      </el-col>
      <el-col :span="8">
        <el-select class="header-select" v-model="value" placeholder="已上架" style="width: 150px" @visible-change="changeData(event)">
          <el-option
            v-for="(item,index) in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @click="func(index)"
          />
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-button color="#27bd9a" @click="onAddProduct">添加商品</el-button>
      </el-col>
    </el-row>
      
    
    </div>
    <el-table 
      v-loading="loading"
      :data="dataList" 
      class="header" 
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column label="产品数量" width="100px" prop="overCount">
      <!-- <img src="" alt=""> -->
  
      </el-table-column>
      <el-table-column prop="name" label="产品名称" width="250px"></el-table-column>
      <el-table-column prop="price" label="价格" width="150px" sortable></el-table-column>
      <el-table-column prop="saleStatus" label="销售状态" width="150px"></el-table-column>
      <el-table-column label="操作" width="150px">
        <template #default="{ row }">
          <el-button
            :icon="Edit"
            circle
            color="#27bd9b"
            @click="onEditProduct(row)"
          ></el-button>
          <el-button
            :icon="Delete"
            circle
            color="#e26237"
            @click="onDelProduct(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>



    <!-- 分页 -->
    <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="params.page"
      v-model:page-size="params.pageSize"
      :page-sizes="[5, 10, 15]"
      :background="true"
      layout="total ,sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
    <!-- 未售出 -->
    <!-- <el-table 
      :data="dataList" 
      class="header" 
      :default-sort="{ prop: 'date', order: 'descending' }"
      v-else
    >
      <el-table-column label="产品" width="100px">
        <el-image style="width: 20px;height: 20px;" :fit="fit"></el-image>
      </el-table-column>
      <el-table-column prop="proName" label="产品名称" width="250px"></el-table-column>
      <el-table-column prop="price" label="价格" width="150px" sortable></el-table-column>
      <el-table-column prop="state" label="销售状态" width="150px"></el-table-column>
      <el-table-column label="操作" width="150px">
        <template #default="{ row }">
          <el-button
            :icon="Edit"
            circle
            color="#27bd9b"
            @click="onEditProduct(row)"
          ></el-button>
          <el-button
            :icon="Delete"
            circle
            color="#e26237"
            @click="onDelProduct(row)"
          ></el-button>
          
        </template>
      </el-table-column>
    </el-table> -->
    <product-edit ref="drawer" @success="onSuccess"></product-edit>
    <!-- <div class="example-pagination-block">
      <div class="example-demonstration"></div>
        <el-pagination 
          v-model:current-page="params.page"
          v-model:page-size="params.pageSize"
          :page-size="[5,6,7]"
          :background="background"
          layout="jumper, total, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" 
          style="margin-top: 20px;justify-content: flex-end"
        />
      </div>-->
      <!-- <div>11111111111111</div> -->
    </div> 
</template>
<style lang="scss" scoped>

.title {
    color: #27ba9b;
    font-size: 20px;
    font-family: "楷体","楷体_GB2312";
  }
.header-div {
  margin-top: 30px;
}

.header {
  margin-top: 40px;
}


.mainPicture{
  width:50px;
  height:50px;
  img{
    width:100%;
    height:100%;
  }
}
</style>